<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <!-- js引入方式 -->
    <script src="js/index.js"></script>
</head>

<body>
    <div id="page">
        <!-- 头部部分 -->
        <header>
            <span class="cur">热点</span>
            <span>关注</span>
        </header>

        <!-- 导航部分 -->
        <nav>
            <a href="#" class="cur">足球现场</a>
            <a href="#">足球生活</a>
            <a href="#">足球美女</a>
        </nav>

        <!-- 主体部分 -->
        <main>
            <ul>
                <li>
                    <figure>
                        <img src="images/pic_03.jpg" alt="">
                        <figcaption>
                            樱桃小丸子……
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/pic_03.jpg" alt="">
                        <figcaption>
                            樱桃小丸子……
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/pic_03.jpg" alt="">
                        <figcaption>
                            樱桃小丸子……
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/pic_03.jpg" alt="">
                        <figcaption>
                            樱桃小丸子……
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/pic_03.jpg" alt="">
                        <figcaption>
                            樱桃小丸子……
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="images/pic_03.jpg" alt="">
                        <figcaption>
                            樱桃小丸子……
                        </figcaption>
                    </figure>
                </li>
            </ul>
        </main>

        <!-- 尾部部分 -->
        <footer>
            <div>
                <p class="cur">
                    <i class="iconfont">&#xe62d;</i>
                    <span>首页</span>
                </p>
                <p>
                    <i class="iconfont">&#xe686;</i>
                    <span>发现</span>
                </p>
                <p>
                    <img src="images/zxj_03.png" alt="">
                </p>
                <p>
                    <i class="iconfont">&#xe609;</i>
                    <span>我的</span>
                </p>
                <p>
                    <i class="iconfont">&#xe625;</i>
                    <span>退出</span>
                </p>
            </div>
        </footer>
    </div>
</body>

</html>